<!--
 * @Author: 'Chenfarry' '2925102113@qq.com'
 * @Date: 2024-08-15 15:14:09
 * @LastEditors: 'Chenfarry' '2925102113@qq.com'
 * @LastEditTime: 2024-08-16 08:56:01
 * @FilePath: \orderApp\components\cu-Album\cu-Album.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="wrap box-border">
    <view
      v-for="(img, index) in imglist"
      :key="index"
      :style="[imgCss]"
      @click="previewImg(img, index)"
      :class="isMask ? 'imgBox' : ''"
    >
      <uv-image :src="img" width="100%" height="100%" :radius="radius" :observeLazyLoad="true">
        <template v-slot:loading>
          <uv-loading-icon color="#d9dede"></uv-loading-icon>
        </template>
      </uv-image>
      <view class="mask" v-if="isMask">
        <uv-text
          :text="`+${isMask}`"
          color="#fff"
          size="28"
          align="center"
          customStyle="justify-content: center"
        ></uv-text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * @param list 图片数组
 * @param count 展示图片数（剩余图片数在最后一张图片上显示）
 * @param imgStyle 每张图片样式
 * @param colNum 图片列数 (默认三列布局，图片宽度依据列数变化)
 * @param height 图片高度
 * @param height 图片圆角
 * @param margin 图片边距
 *
 */
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  count: {
    type: Number || String,
    default: 6,
  },
  imgStyle: {
    type: Object,
    default: null,
  },
  colNum: {
    type: Number,
    default: 3,
  },
  height: {
    type: String || Number,
    default: 212,
  },
  radius: {
    type: String || Number,
    default: 6,
  },
  margin: {
    type: String || Number,
    default: 6,
  },
  // 单图时，图片长边的长度
  singleSize: {
    type: [String],
    default: '60%',
  },
})

// 每一张图片盒子的样式
const imgCss = computed(() => {
  // 单图时宽度
  const width =
    props.list.length === 1 ? props.singleSize : Math.floor(100 / props.colNum) - 2 + '%'

  return props.imgStyle
    ? props.imgStyle
    : {
        width,
        height: props.height + 'rpx',
        margin: props.margin + 'rpx',
      }
})

const isMask = ref(0)
// 计算出用户一共展示图片最大数
const imglist = computed(() => {
  // console.log(props.list.length, props.count)
  if (props.list.length > props.count) {
    isMask.value = props.list.length - props.count
    return props.list.slice(0, props.count)
  } else {
    return props.list
  }
})

// 图片预览
const previewImg = (e, index) => {
  uni.previewImage({
    urls: props.list,
    current: index,
  })
}
</script>

<style lang="scss" scoped>
//
.wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  // justify-content: space-between;

  .imgBox:last-child {
    // filter: brightness(0.6);
    position: relative;

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
